<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="解决方案-列表.css">
</head>
<body>
    <header>
        <div class="head">
            <div class="title">
                <img src="2.png" alt="">
                <p>网络全案营销服务提供商</p>
            </div>
            <nav>
                <a href="首页.html">网站首页</a>
                <a href="" >传悦资源</a>
                <a href="案例-列表.html">传悦案例</a>
                <a href="">传悦服务</a>
                <a href="解决方案-列表.html" id="two">解决方案</a>
                <a href="">需求提交</a>
            </nav>
            <div class="head-right">
                <img src="images/iphon_03.png" alt="">
                <span>0535-00652109</span>
                <img src="images/love_03.jpg" alt="">
                <img src="images/love_05.jpg" alt="">
                <img src="images/love_07.jpg" alt="">
                <img src="images/love_09.png" alt="">
            </div>
            
        </div>
    </header>
    <section>
        <div class="banner">
            <div class="banner-cent">
                <span>网站首页</span>
                &gt;
                <span>解决方案</span>
            </div>
        </div>
    </section>
    <article>
        <div class="list">
            <ul id="temper">
                <li id="temper-li">
                    <a href="解决方案-详情.html">

                        <div class="left">
                            <img src="images/log_03.png" alt="" id="logo">
                            <span>2013-09</span>
                            <p>27</p>
                        </div>
                        <div class="right">
                            <img src="3.png" alt="">
                            <div class="letter">
                                <h3>行业合作专题，针对旅游行业的资源打散再重组 </h3>
                                <h4>标签：    资源整合      旅游行业      行业专题  </h4>
                                <h2>根据游客不同阶段的不同需求，已然可相应引导出不同的媒介资源，串联起所有需求，在不同阶段营造出不同的传播策略，达到既全面，但是</h2>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
            <ul class="express-bottom">
                <li >&lt;</li>
                <li >1</li>
                <li>2</li>
                <li>3</li>
                <li id="bottom">4</li>
                <li>&gt;</li>
            </ul>
        </div>
    </article>
    <footer>
        <div class="foot">
                <img src="images/bottom_logo.png" alt="">
            <div class="fot-right">
                <ul>
                    <li>关于传悦</li>
                    <li>新闻动态</li>
                    <li>传悦观点</li>
                    <li>联系传悦</li>
                    <li>加入传悦</li>
                    <li>付款账户</li>
                </ul>
                <h6>Copyright &copy;创梦网络科技有限责任公司 || 传悦  Chnyoo.cn All Rights Reserved  京ICP备120052221号 </h6>
            </div>
        </div>
    </footer>
</body>
</html>
<script>
    let ul = document.querySelector("#temper")
    let liList = document.querySelector("#temper-li")
    let http = new XMLHttpRequest();
    http.open("get","http://10.35.164.193:81/getol")
    http.send();
    http.onreadystatechange = function(){
        if(http.readyState === 4){
            if(http.responseText === "error"){
                alert("1")
            }
            else{
                let arr = JSON.parse(http.responseText)
                arr.forEach(function(item){
                    let newItem = liList.cloneNode(true)
                    newItem.id = "";
                    ul.appendChild(newItem)
                    newItem.querySelector(".left img").src = item.logo;
                    newItem.querySelector(".left span").innerHTML = item.val;
                    newItem.querySelector(".left p").innerHTML = item.pen;
                    newItem.querySelector(".right img").src = item.big;
                    newItem.querySelector(".right .letter h3").innerHTML = item.h3;
                    newItem.querySelector(".right .letter h4").innerHTML = item.h4;
                    newItem.querySelector(".right .letter h2").innerHTML = item.h2;
                    newItem.setAttribute("li-id",item.id);
                    newItem.onclick=function(){
                        let id = newItem.getAttribute("li-id")
                        let http = new XMLHttpRequest();
                        http.open("get",`http://10.35.164.193:81/result?id=${id}`)
                        http.send();
                        http.onreadystatechange = function(){
                            if(http.responseText === 4){

                            }
                    }
                }
                })
            }
            
        }
    }
</script>